<script lang="ts" setup>
import { useVbenModal } from '@vben/common-ui';

import { Button, Card, message, Popconfirm, Tooltip } from 'ant-design-vue';

import {
  getThemesFilePublicWidgets,
  getThemesFileWidgets,
  postThemesFileBlockWidget,
} from '#/api/admin/theme';
import Icon from '#/components/Icons';

const tabList = [
  {
    key: 'widget',
    tab: '组件',
  },
  {
    key: 'overall',
    tab: '全局组件',
  },
];
const key = ref('widget');
const noTitleKey = ref('widget');
const state: any = reactive({
  file: '',
  theme: '',
  block_name: '',
  widget: '',
});
const widgets: any = ref([]);
const onGetData = async (type: string) => {
  if (type === 'widget') {
    const { data } = await getThemesFileWidgets({
      file: state.file,
      theme: state.theme,
    });
    widgets.value = [];
    widgets.value = data.widgets ?? [];
  } else {
    const { data } = await getThemesFilePublicWidgets({
      file: state.file,
      theme: state.theme,
      block_name: state.block_name,
    });
    widgets.value = [];
    widgets.value = data.widgets ?? [];
  }
};
const [Modal, ModalApi] = useVbenModal({
  fullscreenButton: false,
  footer: false,
  async onOpenChange(isOpen) {
    if (isOpen) {
      const modalData: any = await ModalApi.getData();
      state.block_name = modalData.block_name;
      state.file = modalData.file;
      state.theme = modalData.theme;
      await onGetData(noTitleKey.value);
    }
  },
});

const handleAdd = async (widget: any) => {
  state.widget = widget.name;
  const { msg } = await postThemesFileBlockWidget(state);
  message.success(msg);
  ModalApi.close();
};
const onTabChange = async (value: string, type: string) => {
  if (type === 'key') {
    key.value = value;
  } else if (type === 'noTitleKey') {
    noTitleKey.value = value;
  }
  if (value === 'overall') {
    await getThemesFilePublicWidgets({
      file: state.file,
      theme: state.theme,
      block_name: state.block_name,
    });
  }
  await onGetData(value);
};
</script>
<template>
  <Modal title="组件列表">
    <Card
      :active-tab-key="noTitleKey"
      :tab-list="tabList"
      style="width: 100%"
      @tab-change="(key) => onTabChange(key, 'noTitleKey')"
    >
      <Card
        v-for="widget in widgets"
        :key="widget.name"
        :head-style="{
          paddingTop: '5px',
          paddingBottom: '5px',
        }"
        :title="widget.title"
        class="mb-3"
        hoverable
      >
        <template #extra>
          <Tooltip title="添加组件">
            <Popconfirm
              cancel-text="否"
              ok-text="是"
              title="确认添加？"
              @confirm="handleAdd(widget)"
            >
              <Button type="link">
                <template #icon>
                  <span class="anticon">
                    <Icon icon="ri:add-line" />
                  </span>
                </template>
              </Button>
            </Popconfirm>
          </Tooltip>
        </template>
        <p>{{ widget.description ?? widget.title }}</p>
      </Card>
    </Card>
  </Modal>
</template>
